<template>
  <div class="img_wheel" :style="`height:${height}`">
    <!-- 查看全图按钮 -->
    <el-button type="primary" class="small" icon="el-icon-zoom-in" @click="screen">
      {{ title }}
    </el-button>
    <!-- 单个图片 -->
    <img v-if="url" class="img" :src="url" alt="" @error="singleLoadErr">
    <!-- 轮播展示取消轮播图 -->
    <!--    <el-carousel v-else height="`${height}`" :interval="interval" :arrow="arrow" @change="indexChange">-->
    <!--      <el-carousel-item v-for="(item,index) in url" :key="index">-->
    <!--        <img :src="item" alt="">-->
    <!--      </el-carousel-item>-->
    <!--    </el-carousel>-->
    <!-- 全屏轮播查看 -->
    <el-dialog custom-class="img-preview-dialog" title="" :visible.sync="fullScreen" width="100%" fullscreen center append-to-body>
      <el-carousel ref="carousel" :height="fullHeight" :interval="interval" :arrow="arrow" :autoplay="fullAutoplay" :initial-index="initialIndex">
        <el-carousel-item v-for="(item,index) in url" :key="index">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <!-- 全屏单个图片查看 -->
    <el-dialog custom-class="img-preview-dialog" title="" :visible.sync="fullimg" width="100%" fullscreen center append-to-body>
      <!-- <div class="img_contain"> -->
      <img class="one_img" :src="urlZero" alt="">
      <!-- </div> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Wheel',
  props: {
    height: {
      type: String,
      default: ''
    },
    url: {
      required: true,
      type: String,
      default: ''
    },
    interval: {
      type: Number,
      default: 3000,
      validator: function(value) {
        return value >= 0
      }
    },
    arrow: {
      type: String,
      default: 'hover'
    },
    title: {
      type: String,
      default: '查看大图'
    },
    fullAutoplay: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 全屏轮播
      fullScreen: false,
      // 全屏图片
      fullimg: false,
      // 图片或轮播的显示
      showPic: false,
      // 全屏高度
      fullHeight: '',
      // url为数组长度为1时图片的地址
      urlZero: '',
      // 全屏轮播初始状态激活的幻灯片的索引
      initialIndex: 0
    }
  },
  computed: {
  },
  watch: {
    url: {
      handler(val) {
        console.log(val)
        // 展示单个图片还是轮播
        if (typeof val === 'string' || (Array.isArray(val) && val.length === 1)) {
          this.urlZero = typeof val === 'string' ? val : val[0]
          this.showPic = !this.showPic
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    // // 展示单个图片还是轮播
    // if (typeof this.url === 'string' || (Array.isArray(this.url) && this.url.length === 1)) {
    //   this.urlZero = typeof this.url === 'string' ? this.url : this.url[0]
    //   this.showPic = !this.showPic
    // }
  },
  destroyed() {
    this.showPic = false
  },
  methods: {
    // 查看全图
    screen() {
      console.log(this.initialIndex)
      // 全屏高度
      this.fullHeight = document.body.clientHeight + 'px'
      console.log(document.body.clientHeight)
      // 单个图片 （字符或者数组长度为1）
      if (typeof this.url === 'string' || (Array.isArray(this.url) && this.url.length === 1)) {
        this.fullimg = !this.fullimg
        // 轮播
      } else if (Array.isArray(this.url) && this.url.length >= 2) {
        this.fullScreen = !this.fullScreen
        // 设置大轮播展示图片与小轮播小童
        this.$nextTick(() => {
          this.$refs.carousel.setActiveItem(this.initialIndex)
        })
      }
    },
    // 保存小轮播当前索引
    indexChange(index) {
      this.initialIndex = index
    },
    singleLoadErr(e) {
      console.log('加载图片失败0', e)
    }
  }
}

</script>

<style lang="scss" scoped>
.img_wheel{
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // .img_contain{
  //   height: 100%;
  //   width: 100%;
    .img {
        // display: block;
        // max-width: 100%;
        max-height: 100%;
        max-width: 100%;
        // text-align: center;
        // height: auto;
        // position: absolute;
        // top: 0;
        // bottom: 0;
        // left: 0;
        // right: 0;
        // margin:auto;
        // margin: 0;
      // }
  }
  .el-button{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    z-index: 99;
  }
  // &:hover .el-button{
  //   display: block
  // }
  /deep/ .el-button--primary{
    height:40px;
    width:120px;
    opacity: 0.6;
    background-color: rgba(13, 71, 161, 0.9);
    border-color: rgba(13, 71, 161, 0.9);
  }
}

/deep/ .el-carousel{
        height: 100%;
        width: 100%;
        .el-carousel__container{
          .el-carousel__item{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        //   height: 100
            img{
              max-height: 100%;
              max-width: 100%;
              // max-width: 100%;
              // position: absolute;
              // top: 0;
              // bottom: 0;
              // left: 0;
              // right: 0;
              // margin: auto;
            }
          }
          .el-carousel__arrow{
            top: 0;
            bottom: 0;
            margin: auto;
          }
        }
        .el-carousel__indicators {
          // max-width: auto;
          display: flex;
          justify-content: center;
          .el-carousel__indicator{
            display: block;
            float:left;
          }
        }
      }
.el-carousel--horizontal{
  overflow: hidden;
}

/deep/ .el-dialog{
  background-color: rgba(0, 0, 0, 0.7);
  .el-dialog__header{
    position: fixed;
    top: 0;
    left: -20px;
    z-index: 99;
    height: 5px;
    width: 100%;
    .el-dialog__headerbtn{
     font-size: 54px;
     .el-dialog__close{
       color:#fff;
     }
     .el-dialog__close:hover{
       color:blue;
     }
    }
  }
  .el-dialog__body{
    padding: 0;
    height: 100%;
    width: 100%;
      .one_img{
        // position: relative;
        // display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        // vertical-align: middle;
        max-width: 100%;
        max-height: 100%;
      }
  }
  .el-carousel{
    // height: 100%;
    padding: 0;
      .el-carousel__container{
        // .el-carousel__item{
        //   display: flex;
        //   align-items: center;
        //   height: 100%
        height: 100%;
        // }
        .el-carousel__item{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            // overflow: scroll;
              // @include scrollBar();
            img{
              max-width: 100%;
              max-height: 100%;
              // position: absolute;
              // top: 0;
              // bottom: 0;
              // left: 0;
              // right: 0;
              // margin: auto;
              // overflow: scroll;
            }
          }
        .el-carousel__arrow{
          width: 50px;
          height:50px;
          background-color:rgba(255,255,255,0.6);
          font-size: 20px;
          color:black;
        }
      }
  }
}
</style>
